<template>
  <view class="page-order">
    <leftTab
      v-if="tabs.length > 1"
      :tabs="tabs"
      styles="top:54rpx;"
      :active="active"
      @change="topbarChange"
    ></leftTab>
    <!-- <view class="left-tab">
     
      <view
        class="tab-item"
        :class="active === index && 'active-tab'"
        v-for="(item, index) in tabs"
        :key="index"
        @click="handleItem(item)"
        >{{ item.label }}</view
      >
    </view> -->
    <view :style="{ paddingLeft: tabs.length > 1 ? '180rpx' : '0px' }">
      <TicketOrder v-if="active === 0" />
      <FoodOrder v-if="active === 1" />
    </view>
  </view>
</template>

<script>
import FoodOrder from "./components/foodOrder.vue";
import TicketOrder from "./components/ticketOrder.vue";
export default {
  components: { FoodOrder, TicketOrder },
  props: {
    appCodeList: {
      type: Array,
      default: ["TICKET"],
    },
  },
  data() {
    return {
      active: 0,
      // tabs: [
      //   { title: "购票", key: 0 },
      //   { title: "点餐", key: 1 },
      // ],
    };
  },
  computed: {
    tabs() {
      const list = [
        { title: "购票", key: 0, code: "TICKET" },
        { title: "点餐", key: 1, code: "FOOD" },
      ];
      console.log(this.appCodeList, "this.appCodeList");
      if (this.appCodeList.length === 1) {
        this.active = this.appCodeList[0] == "TICKET" ? 0 : 1;
      }
      const result = list.filter((v) => this.appCodeList.includes(v.code));
      return result;
    },
  },
  onLoad(options) {
    if (options.type) {
      this.active = Number(options.type);
    }
  },
  methods: {
    init() {},
    topbarChange(e) {
      this.active = e;
      this.$nextTick(() => {
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-order {
  padding-top: 30rpx;
  .right {
    padding-left: 200rpx;
  }
}
</style>
